{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
        }

        .dashboard-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            padding: 1rem;
        }

        .dashboard-welcome {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .welcome-text h2 {
            margin: 0;
            font-size: 1.8rem;
        }

        .welcome-text p {
            margin: 0.5rem 0 0;
            opacity: 0.9;
        }

        .dashboard-date {
            text-align: right;
            font-size: 1rem;
        }

        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .stat-box {
            background-color: white;
            padding: 1.2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            border-left: 4px solid var(--secondary-color);
        }

        .stat-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        .stat-box .icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background-color: rgba(52, 152, 219, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.5rem;
            color: var(--secondary-color);
        }

        .stat-box:nth-child(2) {
            border-left-color: var(--success-color);
        }

        .stat-box:nth-child(2) .icon {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success-color);
        }

        .stat-box:nth-child(3) {
            border-left-color: var(--warning-color);
        }

        .stat-box:nth-child(3) .icon {
            background-color: rgba(243, 156, 18, 0.1);
            color: var(--warning-color);
        }

        .stat-box:nth-child(4) {
            border-left-color: var(--accent-color);
        }

        .stat-box:nth-child(4) .icon {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--accent-color);
        }

        .stat-box .content {
            flex: 1;
        }

        .stat-box .number {
            font-size: 1.8rem;
            font-weight: bold;
            margin: 0;
            line-height: 1.2;
        }

        .stat-box .label {
            color: #7f8c8d;
            margin: 0;
            font-size: 0.9rem;
        }

        .dashboard-charts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
            padding: 1.2rem;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .chart-title {
            font-size: 1.2rem;
            font-weight: 500;
            margin: 0;
        }

        .dashboard-lists {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 1.5rem;
        }

        .list-box {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
            padding: 1.2rem;
        }

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.8rem;
        }

        .list-title {
            font-size: 1.2rem;
            font-weight: 500;
            margin: 0;
        }

        .view-all {
            color: var(--secondary-color);
            text-decoration: none;
            font-size: 0.9rem;
        }

        .list-item {
            display: flex;
            align-items: center;
            padding: 0.8rem 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .list-item:last-child {
            border-bottom: none;
        }

        .list-item-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(52, 152, 219, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.8rem;
            font-size: 1rem;
            color: var(--secondary-color);
        }

        .list-item-content {
            flex: 1;
        }

        .list-item-title {
            font-weight: 500;
            margin: 0;
            font-size: 0.95rem;
        }

        .list-item-subtitle {
            color: #7f8c8d;
            margin: 0.2rem 0 0;
            font-size: 0.8rem;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .action-btn {
            background-color: white;
            border: none;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            color: var(--dark-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        }

        .action-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        .action-btn i {
            font-size: 1.8rem;
            margin-bottom: 0.8rem;
            color: var(--secondary-color);
        }

        .action-btn:nth-child(2) i {
            color: var(--success-color);
        }

        .action-btn:nth-child(3) i {
            color: var(--warning-color);
        }

        .action-btn:nth-child(4) i {
            color: var(--accent-color);
        }

        .action-btn span {
            font-size: 0.9rem;
        }

        .dashboard-footer {
            margin-top: 2rem;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .dashboard-charts,
            .dashboard-lists {
                grid-template-columns: 1fr;
            }
        }
    </style>
{% endblock %}

{% block coltype %}colMS{% endblock %}

{% block bodyclass %}{{ block.super }} dashboard{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block nav-sidebar %}{% endblock %}

{% block extrahead %}
{{ block.super }}
<!-- 使用CDN加载Chart.js，加快加载速度 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="dashboard-welcome">
        <div class="welcome-text">
            <h2>{% trans '欢迎回来' %}, <strong>{{ request.user.username }}</strong>！</h2>
            <p>{% trans "这是您的音乐推荐系统概览。您的数据库中有 " %}{{ music_count|default:"0" }} {% trans " 首音乐。" %}</p>
        </div>
        <div class="dashboard-date">
            <p id="currentDate"></p>
        </div>
    </div>

    <div class="dashboard-stats">
        <div class="stat-box">
            <div class="icon">
                <i class="fas fa-music"></i>
            </div>
            <div class="content">
                <p class="number">{{ music_count }}</p>
                <p class="label">{% trans '音乐总数' %}</p>
            </div>
        </div>
        <div class="stat-box">
            <div class="icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="content">
                <p class="number">{{ user_count }}</p>
                <p class="label">{% trans '注册用户' %}</p>
            </div>
        </div>
        <div class="stat-box">
            <div class="icon">
                <i class="fas fa-star"></i>
            </div>
            <div class="content">
                <p class="number">{{ rating_count }}</p>
                <p class="label">{% trans '评分数量' %}</p>
            </div>
        </div>
        <div class="stat-box">
            <div class="icon">
                <i class="fas fa-comments"></i>
            </div>
            <div class="content">
                <p class="number">{{ comment_count }}</p>
                <p class="label">{% trans '评论数量' %}</p>
            </div>
        </div>
    </div>

    <div class="dashboard-charts">
        <div class="chart-container">
            <div class="chart-header">
                <h3 class="chart-title">{% trans '用户活跃度' %}</h3>
            </div>
            <canvas id="userActivityChart"></canvas>
        </div>
        <div class="chart-container">
            <div class="chart-header">
                <h3 class="chart-title">{% trans '评分最高的音乐' %}</h3>
            </div>
            <canvas id="topRatedChart"></canvas>
        </div>
    </div>

    <!-- 添加额外的图表 -->
    <div class="dashboard-charts">
        <div class="chart-container">
            <div class="chart-header">
                <h3 class="chart-title">{% trans '音乐语言分布' %}</h3>
            </div>
            <canvas id="languageChart"></canvas>
        </div>
        <div class="chart-container">
            <div class="chart-header">
                <h3 class="chart-title">{% trans '音乐流派分布' %}</h3>
            </div>
            <canvas id="genreChart"></canvas>
        </div>
    </div>

    <div class="dashboard-lists">
        <div class="list-box">
            <div class="list-header">
                <h3 class="list-title">{% trans '最新上传' %}</h3>
                <a href="{% url 'admin:music_music_changelist' %}" class="view-all">{% trans '查看全部' %}</a>
            </div>
            {% for music in stats.recent_music %}
            <div class="list-item">
                <div class="list-item-icon">
                    <i class="fas fa-music"></i>
                </div>
                <div class="list-item-content">
                    <h4 class="list-item-title">{{ music.song_name }}</h4>
                    <p class="list-item-subtitle">{{ music.artist_name }} • {{ music.upload_date }}</p>
                </div>
            </div>
            {% empty %}
            <p>{% trans '暂无上传音乐。' %}</p>
            {% endfor %}
        </div>
        <div class="list-box">
            <div class="list-header">
                <h3 class="list-title">{% trans '最近评论' %}</h3>
                <a href="{% url 'admin:music_comment_changelist' %}" class="view-all">{% trans '查看全部' %}</a>
            </div>
            {% for comment in stats.recent_comments %}
            <div class="list-item">
                <div class="list-item-icon">
                    <i class="fas fa-comment"></i>
                </div>
                <div class="list-item-content">
                    <h4 class="list-item-title">{{ comment.user }}</h4>
                    <p class="list-item-subtitle">{{ comment.text|truncatechars:60 }}</p>
                </div>
            </div>
            {% empty %}
            <p>{% trans '暂无评论。' %}</p>
            {% endfor %}
        </div>
    </div>

    <div class="dashboard-lists">
        <div class="list-box">
            <div class="list-header">
                <h3 class="list-title">{% trans '评分最高的音乐' %}</h3>
                <a href="{% url 'admin:music_music_changelist' %}" class="view-all">{% trans '查看全部' %}</a>
            </div>
            {% for music in stats.top_rated_music %}
            <div class="list-item">
                <div class="list-item-icon">
                    <i class="fas fa-award"></i>
                </div>
                <div class="list-item-content">
                    <h4 class="list-item-title">{{ music.song_name }}</h4>
                    <p class="list-item-subtitle">{% trans '评分' %}: {{ music.avg_rating|floatformat:1 }}/5 • {{ music.artist_name }}</p>
                </div>
            </div>
            {% empty %}
            <p>{% trans '暂无评分音乐。' %}</p>
            {% endfor %}
        </div>
        <div class="list-box">
            <div class="list-header">
                <h3 class="list-title">{% trans '最活跃用户' %}</h3>
                <a href="{% url 'admin:auth_user_changelist' %}" class="view-all">{% trans '查看全部' %}</a>
            </div>
            {% for user in stats.most_active_users %}
            <div class="list-item">
                <div class="list-item-icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="list-item-content">
                    <h4 class="list-item-title">{{ user.username }}</h4>
                    <p class="list-item-subtitle">{% trans '活动次数' %}: {{ user.activity_count }}</p>
                </div>
            </div>
            {% empty %}
            <p>{% trans '暂无活跃用户。' %}</p>
            {% endfor %}
        </div>
    </div>

    <h2>{% trans '快捷操作' %}</h2>
    <div class="quick-actions">
        <a href="{% url 'admin:music_music_add' %}" class="action-btn">
            <i class="fas fa-plus-circle"></i>
            <span>{% trans '添加音乐' %}</span>
        </a>
        <a href="{% url 'admin:auth_user_add' %}" class="action-btn">
            <i class="fas fa-user-plus"></i>
            <span>{% trans '添加用户' %}</span>
        </a>
        <a href="{% url 'admin:music_music_changelist' %}" class="action-btn">
            <i class="fas fa-list"></i>
            <span>{% trans '管理音乐' %}</span>
        </a>
        <a href="{% url 'admin:music_comment_changelist' %}" class="action-btn">
            <i class="fas fa-comments"></i>
            <span>{% trans '管理评论' %}</span>
        </a>
    </div>

    <div class="dashboard-footer">
        <p>{% trans '音乐推荐系统' %} &copy; {% now "Y" %}</p>
    </div>
</div>

<!-- 简化的图表初始化代码 -->
<script>
// 显示当前日期
function updateDate() {
    const now = new Date();
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
}
updateDate();

// 准备图表数据
function prepareChartData() {
    // 准备默认数据作为备用
    const defaultData = {
        monthLabels: ["1月", "2月", "3月", "4月", "5月", "6月"],
        ratingCounts: [0, 0, 0, 0, 0, 0],
        commentCounts: [0, 0, 0, 0, 0, 0],
        genreLabels: ["流行", "摇滚", "电子", "民谣", "爵士"],
        genreCounts: [10, 8, 6, 4, 2],
        languageLabels: ["英语", "中文", "日语", "韩语", "法语"],
        languageCounts: [20, 15, 10, 5, 3]
    };

    // 使用硬编码的默认数据，确保图表始终显示内容
    return defaultData;
}

// 准备评分最高音乐数据
function prepareTopMusicData() {
    const names = [];
    const ratings = [];
    
    {% for music in stats.top_rated_music %}
        names.push("{{ music.song_name|escapejs }}");
        ratings.push({{ music.avg_rating|default:"0" }});
    {% empty %}
        names.push("无评分数据");
        ratings.push(0);
    {% endfor %}
    
    return { names, ratings };
}

// 初始化图表
document.addEventListener('DOMContentLoaded', function() {
    try {
        // 获取图表数据
        const chartData = prepareChartData();
        const topMusicData = prepareTopMusicData();
        
        // 用户活动趋势图
        new Chart(document.getElementById('userActivityChart'), {
            type: 'line',
            data: {
                labels: chartData.monthLabels,
                datasets: [{
                    label: '评分',
                    data: chartData.ratingCounts,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderWidth: 2,
                    tension: 0.1
                }, {
                    label: '评论',
                    data: chartData.commentCounts,
                    borderColor: 'rgba(153, 102, 255, 1)',
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderWidth: 2,
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '用户活动趋势'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        // 评分最高音乐图表
        new Chart(document.getElementById('topRatedChart'), {
            type: 'bar',
            data: {
                labels: topMusicData.names,
                datasets: [{
                    label: '平均评分',
                    data: topMusicData.ratings,
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 5,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
        
        // 语言分布图
        new Chart(document.getElementById('languageChart'), {
            type: 'pie',
            data: {
                labels: chartData.languageLabels,
                datasets: [{
                    data: chartData.languageCounts,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right'
                    }
                }
            }
        });
        
        // 流派分布图
        new Chart(document.getElementById('genreChart'), {
            type: 'bar',
            data: {
                labels: chartData.genreLabels,
                datasets: [{
                    label: '音乐数量',
                    data: chartData.genreCounts,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ]
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    } catch (error) {
        console.error('图表初始化失败:', error);
    }
});
</script>
{% endblock %}

{% block sidebar %}
<div id="content-related">
    <div id="recent-actions-module" class="module">
        <h2>{% translate '最近操作' %}</h2>
        {% load log %}
        {% get_admin_log 10 as admin_log for_user user %}
        {% if not admin_log %}
            <p>{% translate '没有可用的操作记录' %}.</p>
        {% else %}
            <ul class="actionlist">
                {% for entry in admin_log %}
                <li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
                    {% if entry.is_deletion or not entry.get_admin_url %}
                        {{ entry.object_repr }}
                    {% else %}
                        <a href="{{ entry.get_admin_url }}">{{ entry.object_repr }}</a>
                    {% endif %}
                    <br>
                    {% if entry.content_type %}
                        <span class="mini quiet">{% filter capfirst %}{{ entry.content_type.name }}{% endfilter %}</span>
                    {% else %}
                        <span class="mini quiet">{% translate '未知内容' %}</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>
{% endblock %} 